import React from "react";
import { Form, Input, Modal } from 'antd'
import { useState, cloneElement } from "react";
import PropTypes from 'prop-types';
import { resetPassword } from '@/api/login/index'
import { message } from "antd";



const Index = (props) => {
  const { children } = props
  const [form] = Form.useForm();
  const [isModalOpen, $isModalOpen] = useState(false)
  const handleOk = async () => {
    const values = await form.validateFields()
    resetPassword({
      account: values.account,
      newPassword: values.newPassword,
      email: values.email
    }).then((res) => {
      if (res.status === 0) {
        $isModalOpen(false)
        message.success('重置密码成功')
      }
    })
  };
  const handleCancel = () => {
    $isModalOpen(false)
  };
  return (
    <>
      {children && cloneElement(children, {
        onClick: () => {
          $isModalOpen(true)
        },
      })}
      <Modal title="忘记密码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 17 }}
          style={{ maxWidth: 600 }}
        >
          <Form.Item
            label="账号"
            name="account"
            rules={[{ required: true, message: '请输入账号' },]}
          >
            <Input placeholder="请输入账号" />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[{ required: true, message: '请输入邮箱' },]}
          >
            <Input placeholder="请输入注册邮箱" />
          </Form.Item>
          <Form.Item
            label="密码"
            name="newPassword"
            rules={[{ required: true, message: '请输入密码' },]}
          >
            <Input.Password placeholder="密码长度需6-12位，含字母和数字" />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="okPassword"
            rules={[{
              required: true, validator: (_, value) => {
                if (!value || value !== form.getFieldValue('newPassword')) {
                  return Promise.reject(new Error('两次输入的密码不一致'))
                }
                return Promise.resolve()
              }
            }]}
          >
            <Input.Password placeholder="请确认密码" />
          </Form.Item>
        </Form>
      </Modal>
    </>

  )
}

Index.propTypes = {
  children: PropTypes.node,
};

export default Index

